<template>
    <div>
        <el-container>
            <el-header>
                <el-button @click="addForm">创建表单</el-button>
            </el-header>
            <el-main>
                <el-table :data="tableData"
                          style="width: 100%">
                    <el-table-column
                            prop="name"
                            label="表单名称"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="key"
                            label="表单key"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="lastUpdated"
                            label="最后修改日期"
                    >
                        <template slot-scope="scope">
                            {{formatDate(scope.row.lastUpdated)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="createdBy"
                            label="创建人">
                    </el-table-column>
                    <el-table-column
                            prop="opt"
                            label="操作">
                        <template slot-scope="scope">
                            <el-button type="danger" @click="deleteModel(scope.row)" size="mini">删除</el-button>
                            <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
                            <el-button @click="preview" size="mini">预览</el-button>
                            <el-button @click="design(scope.row)" size="mini">设计</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
        <el-dialog
                title="创建表单"
                :visible.sync="centerDialogVisible"
                center>
            <el-form :rules="createFormRoles" ref="createForm" label-position="right" label-width="80px"
                     :model="createForm">
                <el-form-item label="表单名称" prop="name">
                    <el-input v-model="createForm.name"></el-input>
                </el-form-item>
                <el-form-item label="表单key" prop="key">
                    <el-input v-model="createForm.key"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input v-model="createForm.description"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveForm">保 存</el-button>
           </span>
        </el-dialog>
    </div>
</template>

<script>
    import {
        saveFormDefinition,
        getFormDefinition,
        deleteFormModel,
        getFormDefinitionById,
        updateFormModel
    } from '../../api/form.builder'

    export default {
        name: "FormManager",
        data() {
            return {
                tableData: [],
                createForm: {
                    id: '',
                    name: '',
                    key: '',
                    description: ''
                },
                createFormRoles: {
                    name: [
                        {required: true, message: '请输入表单名称', trigger: 'blur'}
                    ],
                    key: [
                        {required: true, message: '请输入表单key', trigger: 'blur'}
                    ]
                },
                centerDialogVisible: false
            }
        },
        methods: {
            saveForm() {
                let param = Object.assign({modelType: 5}, this.createForm);
                if (param.id) {
                    updateFormModel(param).then((res) => {
                        this.centerDialogVisible = false;
                        this.$message.success("更新成功");
                        this.load();
                    })
                } else {
                    saveFormDefinition(param).then((res) => {
                        this.centerDialogVisible = false;
                        this.$message.success("保存成功");
                        this.load();
                    })
                }
            },
            load() {
                let that = this
                getFormDefinition({modelType: 5}).then(function (res) {
                    that.tableData = res.data;
                });
            },
            deleteModel(row) {
                this.$confirm('确定要删除' + row.name + ' 吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteFormModel(row.id).then((res) => {
                        this.load();
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            preview() {
                this.$router.push("form-preview");
            },
            edit(row) {
                getFormDefinitionById(row.id).then((data) => {
                    this.createForm.id = data.id;
                    this.createForm.name = data.name;
                    this.createForm.key = data.key;
                    this.createForm.description = data.description;
                    this.centerDialogVisible = true;
                })
            },
            addForm() {
                this.createForm.description = '';
                this.createForm.id = '';
                this.createForm.name = '';
                this.createForm.key = '';
                this.centerDialogVisible = true;
            },
            design(row) {
                this.$store.commit('setEditModelId',row.id)
                this.$router.push({
                    name: 'form-builder',
                    query: {
                        modelId: row.id
                    }
                });
            }
        },
        created() {
            this.load();
        }
    }
</script>

<style scoped>
    .el-header {
        line-height: 60px;
        text-align: right;
    }
</style>
